<template>
    <div class="yb-notice">
        <yb-header></yb-header>
        <div class="content">
            <div class="title">平台公告</div>
            <div class="itemList">
                <div class="list" v-for="item in notices" :key="item.id">
                    <div class="active" @click="linkTo(item.id)">{{item.title}}</div>
                    <div class="time">{{item.createTime}}</div>
                </div>
            </div>
            <div class="paging">
                <div class="right">
                    <div class="btn" @click="toStart">首页</div>
                    <div class="bg-btn bg-left" v-show="pageNum !== 1" @click="prev"></div>
                    <div style="line-height:36px">1/{{pagEvent}}</div>
                    <div class="bg-btn bg-right" v-show="pageNum !== pagEvent" @click="next"></div>
                    <div class="btn" @click="toEnd">尾页</div>
                    <el-input class="el-btn" v-model="input" placeholder="请输入内容"></el-input>
                    <div class="btn" @click="toNumber">跳转</div>
                </div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>

<script>
    import header from '../packages/header.vue'
    import footer from '../packages/footer.vue'
    export default {
        name: 'notice',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
        data: function () {
            return {
                input: 1,
                notices: [],
                'pagEvent': 1,
                pageSize: 11,
                pageNum: 1
            }
        },
        created: function () {
            this.getData()
        },
        methods: {
            linkTo: function (id) {
                this.$router.push({
                    path: 'info',
                    query: {
                        id: id
                    }
                })
            },
            getData: function () {
                this.$ajax(
                    'announcement/announceList',
                    {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum
                    }
                    , () => {
                    },
                    (content) => {
                        this.notices = content.resultList
                        this.pagEvent = Math.ceil(content.totalCount / this.pageSize)
                    }, false)
            },
            toStart: function () {
                if (Number(this.pageNum) === 1) return
                this.pageNum = 1
                this.getData()
            },
            prev: function () {
                if (Number(this.pageNum) === 1) return
                this.pageNum -= 1
                this.getData()
            },
            next: function () {
                if (Number(this.pageNum) === Number(this.pagEvent)) return
                this.pageNum += 1
                this.getData()
            },
            toEnd: function () {
                if (Number(this.pageNum) === Number(this.pagEvent)) return
                this.pageNum = Number(this.pagEvent)
                this.getData()
            },
            toNumber: function () {
                if (Number(this.input) === Number(this.pageNum)) return
                if (Number(this.input) > Number(this.pagEvent)) {
                    this.$message({
                        showClose: true,
                        message: '请输入正确的页码',
                        duration: 5000,
                        type: 'error'
                    })
                    return
                }
                if (Number(this.input) === 0) {
                    this.$message({
                        showClose: true,
                        message: '页码不能为0',
                        duration: 5000,
                        type: 'error'
                    })
                    return
                }
                this.pageNum = Number(this.input)
                this.getData()
            }
        }
    }

</script>

<style lang="less">
    @import "../less/variables";
    .yb-notice {
        font-size: 14px;
        .content {
            width: @layout-width;
            margin: 0 auto;
            background: white;
            margin-top: 35px;
            .title {
                padding-left: 20px;
                line-height: 50px;
                background: #f4f5f9;
            }
            .itemList {
                line-height: 40px;
                padding: 0 10px;
                color: #333333;
                .list {
                    font-size: 14px;
                    display: flex;
                    border-bottom: 1px solid #e7e7eb;
                    .active {
                        flex: 1;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    .time {
                        width: 100px;
                        text-align: center;
                    }
                }
            }
            .paging {
                height: 40px;
                padding: 30px 0;
                .right {
                    float: right;
                    margin-right: 30px;
                    display: flex;
                    line-height: 35px;
                }
                .btn {
                    border: 1px solid #e5e5e5;
                    border-radius: 3px;
                    width: 70px;
                    text-align: center;
                    margin: 0 5px;
                    cursor: pointer;
                }
                .el-btn {
                    width: 70px !important;
                    text-align: center;
                    input {
                        width: 70px !important;
                    }
                }
                .bg-left {
                    background: url('../assets/left.png') no-repeat center center;
                }
                .bg-right {
                    background: url('../assets/right.png') no-repeat center center;
                }
                .bg-btn {
                    width: 35px;
                    height: 35px;
                    margin: 0 5px;
                    border-radius: 3px;
                    cursor: pointer;
                    border: 1px solid #e5e5e5;
                }
            }
        }
    }

</style>
